import { HomeFilled, PieChartFilled, BookFilled } from '@ant-design/icons'
import { Menu } from 'antd'
import React, { useState } from 'react'
import './menu.less'
import { useNavigate } from 'react-router-dom'

function getItem(label, key, icon, children, type) {
  return {
    key,
    icon,
    children,
    label,
    type,
  }
}

const items = [
  getItem('首页', '/home', <HomeFilled />),
  getItem('数据概览', 'sub2', <PieChartFilled />, [
    getItem('分析页', '/analysis'),
    getItem('监控页', '/monitor'),
    getItem('工作台', '/work'),
  ]),
  getItem('列表页', 'sub3', <BookFilled />, [
    getItem('标准列表', '8'),
    getItem('搜索列表', '9'),
    getItem('查询列表', '10'),
    getItem('卡片列表', '11'),
  ]),
] // submenu keys of first level

const rootSubmenuKeys = ['/home', 'sub2', 'sub3']

const App = () => {
  const navigateTo = useNavigate()
  const [openKeys, setOpenKeys] = useState(['sub1'])

  const onOpenChange = (keys) => {
    const latestOpenKey = keys.find((key) => openKeys.indexOf(key) === -1)
    console.log(latestOpenKey)
    if (rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
      setOpenKeys(keys)
    } else {
      setOpenKeys(latestOpenKey ? [latestOpenKey] : [])
    }
  }

  const clickMenuItem = ({ key }) => {
    navigateTo(key)
  }

  return (
    <Menu
      mode="inline"
      openKeys={openKeys}
      onOpenChange={onOpenChange}
      className="left-menu"
      items={items}
      onClick={clickMenuItem}
    />
  )
}

export default App
